<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入Layui -->
		<script src="../bootstrap-4.6.1/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../layui-v2.6.8/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../layui-v2.6.8/layui/css/layui.css" />
		<!-- 引入自己 -->
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../public/public.css" />
		<link rel="stylesheet" type="text/css" href="../css/shopphead.css" />
		<link rel="stylesheet" type="text/css" href="../css/settlement.css" />

	</head>
	<body>
		<div id="app">
			<!-- 头部 -->
			<div class="header">
				<!-- 头部导航栏 -->
				<div class="header-nav">
					<!-- 版心 -->
					<div class="main clear">
						<!-- 地图ul -->
						<ul class="map">
							<li class="nav-show">
								<a href="javascript:void(0)" class="icon-a">
									<i class="iconfont">&#xec3f;</i>
									<span class="font">地区</span>
								</a>
								<!-- 国内外地区 -->
								<div class="map-land nav-collapse">
									<div class="item-lists">
										<div class="item">
											<a href="">北京</a>
										</div>
										<div class="item">
											<a href="">北京</a>
										</div>
										<div class="item">
											<a href="">北京</a>
										</div>
										<div class="item">
											<a href="">北京</a>
										</div>
										<div class="item">
											<a href="">北京</a>
										</div>
									</div>
								</div>
							</li>
						</ul>
						<ul class="go-index">
							<!-- 返回首页 -->
							<li>
								<a href="../index.html">
									<i class="iconfont">&#xe600;</i>
									<span class="font">首页</span>
								</a>
							</li>
						</ul>
						<!-- 导航ul -->
						<ul class="nav-r">
							<li>
								<a href="login.html" id="userIndex">你好，请登录</a>
								&nbsp;&nbsp;
								<a href="register.html">免费注册</a>
							</li>
							<li class="spacer"></li>
							<li>
								<a href="">我的订单</a>
							</li>
							<li class="spacer"></li>
							<li class="cw-icon nav-show">
								<a href="">我的京东</a>
								<i class="iconfont">&#xe65f;</i>
								<div class="my-jd nav-collapse">

								</div>
							</li>
							<li class="spacer"></li>
							<li>
								<a href="">京东会员</a>
							</li>
							<li class="spacer"></li>
							<li class="cw-icon  nav-show">
								<a href="">企业采购</a>
								<i class="iconfont">&#xe65f;</i>
								<div class="enterprise nav-collapse">

								</div>
							</li>
							<li class="spacer"></li>
							<li>
								<a href="">客户服务</a>
							</li>
							<li class="spacer"></li>

							<li class="cw-icon  nav-show">
								<a href="">网站导航</a>
								<i class="iconfont">&#xe65f;</i>
								<div class="site-navigation nav-collapse">

								</div>
							</li>
							<li class="spacer"></li>
							<li class="cw-icon  nav-show">
								<a href="address.html">我的地址</a>
							</li>
							<li class="spacer"></li>
							<li>
								<a href="">网站无障碍</a>
							</li>
						</ul>
					</div>
				</div>
				<!-- 头部logo搜索 -->
				<div class="logo-sea">
					<div class="main">
						<!-- 左边logo -->
						<div class="left-logo">
							<h1>

							</h1>
						</div>
						<!-- 中间搜索 -->
						<div class="center-sea">
							<!-- 顶部搜索 -->
							<div class="search-t">
								<!-- 搜索盒子 -->
								<div class="from-box">
									<!-- 时间线 -->
									<div class="stepflex">
										<dl class="first done">
											<dt class="s-num">1</dt>
											<dd class="s-text">1.我的购物车<s></s><b></b></dd>
										</dl>
										<dl class="normal doing">
											<dt class="s-num">2</dt>
											<dd class="s-text">2.填写核对订单信息<s></s><b></b></dd>
										</dl>
										<dl class="normal last">
											<dt class="s-num">3</dt>
											<dd class="s-text">3.成功提交订单<s></s><b></b></dd>
										</dl>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
			<!-- 内容 -->
			<div class="context">
				<div class="main">
					<!-- 填写并核对订单信息 -->
					<div class="checkout-tit">
						<span class="tit-txt">填写并核对订单信息</span>
					</div>
					<!-- 收纳用户信息大盒子 -->
					<div class="cheks">
						<!-- 收货人信息标题 -->
						<div class="item-title">
							<h3>收货人信息</h3>
						</div>
						<!-- 收货人信息 -->
						<div class="address" id="address-box">
							<span>李欣金</span>
							<span>广东 汕尾市 城区 香洲街道 汕尾职业技术学院A区</span>
							<select name="" id="select-address">
								<option value="">选择收货地址</option>
							</select>
						</div>
						<div class="hr"></div>
						<!-- 支付方式 标题-->
						<div class="item-title">
							<h3>支付方式</h3>
						</div>
						<!-- 支付方式 -->
						<div class="address">
							<button type="button" class="layui-btn layui-btn-danger payWay" data-play="1">货到付款</button>
							<button type="button" class="layui-btn layui-btn-primary layui-border-black" data-play="2">支付宝</button>
						</div>
						<div class="hr"></div>
						<!-- 快递方式 标题-->
						<div class="item-title">
							<h3>快递方式</h3>
						</div>
						<!-- 快递方式 -->
						<div class="address">
							<button type="button" class="layui-btn layui-btn-danger">先付款</button>
							<button type="button" class="layui-btn layui-btn-primary layui-border-black">货到付款</button>
						</div>
						<div class="hr"></div>
						<!-- 送货清单 标题-->
						<div class="item-title">
							<h3>送货清单</h3>
						</div>
						<!-- 送货清单-->
						<div class="address goods">
							<button type="button" class="layui-btn layui-btn-danger">快递服务</button>
							<div class="goods-list">
								<div class="goods-item">
									<img src="../img/background.png">
									<p class="git-p">
										荣耀Magic4 全新一代骁龙8 双曲屏设计 LTPO屏幕 潜望式长焦摄像头 7P广角主摄 全网通版 8GB+256GB 瓷青
									</p>
									<div class="git-price">
										<span>$1333</span>
										<span>x1</span>
										<span>有货</span>
									</div>
								</div>
								<div class="goods-item">
									<img src="../img/background.png">
									<p class="git-p">
										荣耀Magic4 全新一代骁龙8 双曲屏设计 LTPO屏幕 潜望式长焦摄像头 7P广角主摄 全网通版 8GB+256GB 瓷青
									</p>
									<div class="git-price">
										<span>$1333</span>
										<span>x1</span>
										<span>有货</span>
									</div>
								</div>
							</div>
						</div>
						<div class="hr"></div>
					</div>
					<!-- 支付盒子 -->
					<div class="play">
						<!-- 总金额 -->
						<div class="sum-price">
							<span class="price-tit">应付总额：</span>
							<span id="sumPayPriceId">￥7098.00</span>
						</div>
						<!-- 收货人 -->
						<div class="sh-man">
							<span class="mr20" id="sendAddr" style="word-wrap: break-word">寄送至： 广东 汕尾市 城区 香洲街道  汕尾职业技术学院A区</span>
							<span id="sendMobile">收货人：李欣金 150****6360</span>
						</div>
						<button type="button" class="layui-btn layui-btn-danger" id="go-submit">提交订单</button>
					</div>
				</div>
			</div>
			<!-- 尾部 -->
			<div class="footer">

			</div>
		</div>
	</body>
	<script src="../public/public.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/settlement.js" type="text/javascript" charset="utf-8"></script>
</html>
